<template>
  <div>
    <van-cell-group title="基本信息">
      <van-field
        v-model="product.name"
        label="商品名称"
        placeholder="商品名称"
        :rules="[{ required: true, message: '商品名称' }]"
      ></van-field>

      <van-field
        v-model="product.subTitle"
        label="商品副标题"
        placeholder="商品副标题"
        :rules="[{ required: true, message: '商品副标题' }]"
      ></van-field>

      <van-field
        v-model="product.description"
        label="商品描述"
        placeholder="商品描述"
        :rules="[{ required: true, message: '商品描述' }]"
      ></van-field>
    </van-cell-group>

    <van-cell-group title="商品分类">
      <van-field
        readonly
        clickable
        name="商品分类"
        :value="product.productCategoryName"
        label="商品分类"
        placeholder="点击选择商品分类"
        @click="showCategoryPicker = true"
      ></van-field>

      <van-field
        readonly
        clickable
        name="商品品牌"
        :value="product.brandName"
        label="商品品牌"
        placeholder="点击选择商品品牌"
        @click="showBrandPicker = true"
      />

      <van-field
        readonly
        clickable
        name="属性分类"
        :value="product.attributeCategoryName"
        label="属性分类"
        placeholder="点击选择属性分类"
        @click="showAttributeCategoryPicker = true"
      />

      <van-field
        readonly
        clickable
        name="店铺分类"
        :value="product.tabCategoryName"
        label="店铺分类"
        placeholder="点击选择店铺分类"
        @click="showTabCategorysPicker = true"
      />
    </van-cell-group>
    <van-cell-group title="其他">
      <van-field
        v-model="product.productSn"
        label="货号"
        placeholder="货号"
        :rules="[{ required: true, message: '请输入货号' }]"
      ></van-field>

      <van-field
        v-model="product.keywords"
        label="关键字"
        placeholder="关键字"
        :rules="[{ required: true, message: '请输入关键字,分隔' }]"
      ></van-field>

      <van-field
        v-model="product.unit"
        label="单位"
        placeholder="单位"
        :rules="[{ required: true, message: '请输入单位' }]"
      ></van-field>
    </van-cell-group>
    <van-goods-action>
      <van-button
        type="danger"
        block
        v-if="product.deleteStatus==1"
        @click="onReEditProduct"
      >此商品已被删除，点击恢复</van-button>
      <van-button type="primary" block @click="onSubmit" v-else>保存</van-button>
    </van-goods-action>

    <!-- 商品分类选择器 -->
    <van-popup v-model="showCategoryPicker" position="bottom">
      <el-cascader-panel ref="category_cascader" :props="cprops" @change="handleChange"></el-cascader-panel>
    </van-popup>
    <!-- 商品品牌 -->
    <van-popup v-model="showBrandPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="brandOptions"
        value-key="name"
        @confirm="handleBrandChange"
        @cancel="showBrandPicker = false"
      />
    </van-popup>
    <!-- 商品属性分类 -->
    <van-popup v-model="showAttributeCategoryPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="attributeCategoryOptions"
        value-key="name"
        @confirm="handleAttributeCategoryChange"
        @cancel="showAttributeCategoryPicker = false"
      />
    </van-popup>

    <!-- 商品店铺分类 -->
    <van-popup v-model="showTabCategorysPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="tabCategorys"
        value-key="name"
        @confirm="handleTabCategorysChange"
        @cancel="showTabCategorysPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  creatProduct,
  updateProduct,
  productinfo,
  brandlist,
  categorylist,
  attributeCategory
} from "@/api/product";
import { tabCategorylist } from "@/api/tabCategory";

import tabTategory from "./tabTategory";

export default {
  components: { tabTategory },
  name: "projectInfo",
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.product = newValue;
      },
      immediate: true
    }
  },
  created() {
    this.selectid = 0;
    this.brandlist();
    this.getAttributeCategory();
    this.getTabCategory();
  },

  data() {
    return {
      showBrandPicker: false,
      showCategoryPicker: false,
      showAttributeCategoryPicker: false,
      showTabCategorysPicker: false,
      product: {
        id: null
      },

      brandOptions: [],
      attributeCategoryOptions: [],
      tabCategorys: [],
      loading: false,
      listLoading: false,
      selectid: 0,
      cprops: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          var rid = 0;
          if (node.value != null) {
            rid = node.value;
          }
          categorylist(rid).then(response => {
            const nodes = Array.from(response.data).map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 1
            }));
            resolve(nodes);
          });
        }
      }
    };
  },

  methods: {
    onReEditProduct(){
      this.product.deleteStatus=0
      this.product.publishStatus=0
    },
    onSubmit() {
      if (
        undefined == this.product.productAttributeCategoryId ||
        this.product.productAttributeCategoryId <= 0
      ) {
        this.$message.error("请选择属性分类");
        return;
      }
        this.$emit("commit", this.product);
    },
    // 获取商品品牌
    brandlist() {
      this.loading = true;
      brandlist().then(response => {
        this.loading = false;
        this.brandOptions = response.data;
      });
    },
    // 商品品牌修改触发
    handleBrandChange(value) {
      this.product.brandId = value.id;
      this.product.brandName = value.name;
      this.showBrandPicker = false;
    },
    // 商品属性分类
    getAttributeCategory() {
      attributeCategory().then(response => {
        this.attributeCategoryOptions = response.data;
      });
    },
    handleAttributeCategoryChange(value) {
      this.product.productAttributeCategoryId = value.id;
      this.product.attributeCategoryName = value.name;
      this.showAttributeCategoryPicker = false;
    },
    handleChange(value) {
      var tnode = this.$refs.category_cascader.getCheckedNodes()[0].data;
      this.product.productCategoryId = tnode.value;
      this.product.productCategoryName = tnode.label;
    },

    //店铺属性分类
    // 获取店铺下分类列表
    getTabCategory() {
      
      tabCategorylist(this.$store.getters.shopId).then(response => {
        this.tabCategorys = response.data;
      });
    },
    handleTabCategorysChange(value) {
      this.product.tabcategoryId = value.id;
      this.product.tabCategoryName = value.name;
      this.showTabCategorysPicker = false;
    }
  }
};
</script>

<style scoped>
</style>